<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div div{
            border: black solid 1px;
            text-align: center;
            line-height: 20px;
            width: 30px;
            height: 20px;
            float: left;
            /* position: relative; */
            border-radius: 10px;
            /* display: inline-block; */
            font-size: 10px;
        }

        .out{
            /* font-size: 4; */
            width: 600px;
            position: relative;
            /* mrgin auto生效的基础,块级元素要有宽度,才能自动计算 */
            /* margin: 0 auto; */
            margin-top: 200px;
            z-index: 100;
            
        }
        /* #year{
            width: 40px;
        } */
        .te{
            width: 10px;
            border: green;        
        }

        #biggest{
            /* display: block; */
            color: white;
            /* background-image: linear-gradient(#fdec00, #f74444, #e72cce, #1beb3d); */
            background-color: #F4D03F;
background-image: linear-gradient(132deg, #F4D03F 0%, #16A085 100%);

            width: 480px;
            height: 480px;
            border-radius: 475px;
            float: left;
            margin-top: -220px;
            margin-left: -480px;
            animation: overss 60s infinite;
            z-index: 50;
            filter: blur(1px);
        }
        #biggest2{
            /* display: block; */
            color: white;
            background-color: #F4D03F;
background-image: linear-gradient(132deg, #F4D03F 0%, #16A085 100%);

            width: 380px;
            height: 380px;
            border-radius: 190px;
            float: left;
            margin-top: -175px;
            margin-left: -423px;
            animation: overss 3600s infinite;
            z-index: 99;
            filter: blur(1px);
        }

        @keyframes overss{
            0%{
                transform: rotateZ(0deg);
            }
            100%{
                transform: rotateZ(360deg);
            }
        }

        body{
            background-color: rgb(197, 197, 181);
            /*overflow: hidden;*/
        }
        /*body::-webkit-scrollbar{*/
        /*    display:none;*/
        /*}*/
        .textline{
            border-radius: 30px;
            position: relative;
            float: right;
            width: 600px;
            height: 200px;
            right: 200px;
            /* top: -100px; */
            font-family: '我们能不能在一起';
             line-height: 40px;
            text-align: center;
            margin-bottom: 150px;
            border: green 1px solid;
        }

        /*.textline:nth-child(4){*/
        /*    border-radius: 100px;*/
        /*}*/
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(function(){
            begin();
            function begin(){
                var date = new Date();
            var second = date.getSeconds();
            $('#year').text(date.getFullYear());
            $('#mouth').text(date.getMonth());
            $('#day').text(date.getDay());
            $('#hour').text(date.getHours());
            $('#minute').text(date.getMinutes());
            $('#second').text(date.getSeconds());

            setInterval(function(){
                date = new Date();
                $('#year').text(date.getFullYear());
                $('#mouth').text(date.getMonth());
                $('#day').text(date.getDay());
                $('#hour').text(date.getHours());
                $('#minute').text(date.getMinutes());
                $('#second').text(date.getSeconds());
                var i = 4;
                $('.textline:nth-child('+ i +')').animate({
                    lineHeight :'200px',
                    borderRadius : '100px'

                },"slow");

                if(date.getSeconds() === 0){
                    let num = i+1;
                    $('.textline:nth-child('+ i +')').animate({
                        top : '+=400px'
                    },"slow",function () {
                        $('.textline:nth-child('+ num +')').animate({
                            top:'--=350',
                            lineHeight :'200px',
                            borderRadius : '100px'
                        },"slow",function () {
                            $('.textline:nth-child('+ i +')').remove();
                        });
                    });
                    i++;
                }if(date.getMinutes()===0){
                    $('').animate({

                    });
                }
            },1000);
            // $('#second').addClass('over');
            }
            
        })
    </script>
</head>
<body>

    <div class="out">
        <div id="year">
            year
        </div>
        <div class="te">
            年
        </div>
        <div id="mouth">
            mouth
        </div>
        <div class="te">
            月
        </div>
        <div id="day">
            day
        </div>
        <div class="te">
            日
        </div>
        <div id="hour">
            hour
        </div>
        <div class="te">
            :
        </div>
        <div id="minute">
            mintue
        </div>
        <div class="te">
            /
        </div>
        <div id="second" class="over">
            second
        </div>
    </div>
    <p id="biggest">
    </p>
    <p id="biggest2"></p>

    <p class="textline" >
        <strong> 想到了,每每面临上场时的那种压力,以及想想如果自己有能力独当一面有多好。
            2020年6月5日09:54:51</strong>
    </p>
    <p class="textline" >
        <strong> 我因为身无长物而感到慌张,我因为我可能碌碌无为而辗转反侧.
            2020年6月9日08:26:12
            </strong>
    </p>
    <p class="textline">
        <strong> 朋友很少，害怕孤独。曾为了你，不顾一切。
            2020年6月9日20:33:29
            
            </strong>
    </p>
    <p class="textline">
        <strong>我注定碌碌无为么，还是仅仅是无为。
            2020年6月10日14:26:30                        
            </strong>
    </p>
    <p class="textline">
        <strong>    我经常在不经意间想到你，那让我痛彻心扉。
            2020年6月10日20:01:59
                    
            </strong>
    </p>
    <p class="textline">
        <strong>            我虽苟活,但心已死.此刻言什么都为时已晚.(我害怕这句话)
            2020年6月11日14:41:12
            
            </strong>
    </p>
    <p class="textline">
        <strong>      我想有个几个人的小团队，我渴望我可以有能力做一个队长。（真可笑）
            2020年6月12日02:28:02
                  
            </strong>
    </p>
    <p class="textline">
        <strong>          我的目标在哪里，谁又是我的终点。
            2020年6月12日15:26:29
              
            </strong>
    </p>
    <p class="textline">
        <strong>          平凡人？熬夜、看电影、**
            2020年6月12日23:56:42
              
            </strong>
    </p>
    <p class="textline">
        <strong>            时间飞逝，一年了，你都干什么了。
            2020年6月15日18:12:25
            
            </strong>
    </p>
    <p class="textline">
        <strong>         可能，我撞了南墙才会回头吧。
            可能，我见了黄河才会死心吧
            可能，我偏要一条路走到黑吧。
            可能，我还没遇见那个她吧。
            2020年6月15日20:31:39
               
            </strong>
    </p>
    <p class="textline">
        <strong>            好高骛远，并非燕雀不懂鸿鹄之志，而是鸿鹄，真的太少太少。
            2020年6月19日22:16:50
            
            </strong>
    </p>
    <p class="textline">
        <strong>         乾坤已定，黑马不在。所做皆错，所选皆错。
            2020年6月20日15:29:05
               
            </strong>
    </p>
    <p class="textline">
        <strong>            一无所有怎敢误佳人。
            2020年7月1日03:23:26
            
            </strong>
    </p>
    <p class="textline">
        <strong>          既没有破釜沉舟的勇气，又不甘苟且偷生的平凡。
            2020年7月4日15:14:56
              
            </strong>
    </p>
    <p class="textline">
        <strong>        我哪知道我的青春，哪知道我的梦想，
            可就是那三尺讲台下的故事，
            可能是我最最不敢的回忆吧。
            2020年7月4日15:47:10
                
            </strong>
    </p>
    <p class="textline">
        <strong>           起的很早，睡得很晚
            你见过凌晨五点的校园
            你伴着室友的呼噜声 磨牙声
            度过了一个个埋头苦写的夜
            你的笔下，盛开一整个春天
            
            这个世界上
            不存在无法企及的梦想
            心之所向，素服以往
            去追，去渴望，去学习，去成长
            去你能到的每一个地方
            你的努力，决定你成为什么样的人
            
            这个六月
            跨过去了是龙门，跨不过去是青春
            你便是锦鲤。
            2020年7月4日15:56:00
             
            </strong>
    </p>
    <p class="textline">
        <strong>            你现在需要的是钱，
            需要的是一个正经的工作，
            需要的是一份卧薪尝胆的勇气和毅力，
            需要的是一份头悬梁锥刺股的动力。
            而不是几分钟热血，以及醉酒之后的几番豪言壮志。
            2020年7月18日16:23:00
            
            </strong>
    </p>
    <p class="textline">
        <strong>            为何电影总会结束，
            如果即将落幕，是不甘，还是不舍。
            2020年7月21日00:07:48
            
            </strong>
    </p>
    <p class="textline">
        <strong>          如果一切已经命中注定了，我真害怕结局不够精彩。
            2020年7月21日00:15:54
              
            </strong>
    </p>
    <p class="textline">
        <strong>            千里之水，不可解近渴。
            2020年7月21日00:17:00
            
            </strong>
    </p>
    <p class="textline">
        <strong>            
            怎么阳光。
            2020年7月21日00:18:24
            
            </strong>
    </p>
    <p class="textline">
        <strong>           最扎心的莫过于，她就在那里，触手可及，
            可放眼脚下，
            却又是那么遥不可及。
            2020年7月23日19:26:19
             
            </strong>
    </p>
    <p class="textline">
        <strong>           一身清贫怎敢入繁华，
            两袖清风怎敢误佳人。
            2020年7月25日22:12:46
             
            </strong>
    </p>
    <p class="textline">
        <strong>           许愿瓶里装的是梦想，
            还是理想？
            2020年7月26日22:24:51
            
            </strong>
    </p>
    <p class="textline">
        <strong>          鸡汤喝太多了，
            电影看太多了，
            便以为奇迹随处可见，
            但是却看不到不平凡背后的平凡。
            2020年7月27日22:43:51
              
            </strong>
    </p>

    









</body>
</html>